<template>
  <div v-if="Object.keys(orderInfo).length" v-loading="toLoad" class="orderInfo">
    <div class="order-title">收货信息</div>
    <el-row class="mb10">
      <el-col :span="12" class="title">用户昵称：{{ orderInfo.user.nickName }}</el-col>
      <el-col :span="12" class="title">收货人：{{ orderInfo.consigneeName }}</el-col>
    </el-row>
    <el-row class="mb10">
      <el-col :span="12" class="title">联系电话：{{ orderInfo.consigneeMobile }}</el-col>
      <el-col :span="12" class="title">收货地址：{{ orderInfo.consigneeAddress }}</el-col>
    </el-row>
    <el-divider style="margin: 20px 0 !important" />
    <div class="order-title">订单信息</div>
    <el-row class="mb10">
      <el-col :span="12" class="title">订单ID：{{ orderInfo.orderNo }}</el-col>
      <el-col v-if="(orderInfo.refundState == 0 || orderInfo.refundState == 2) && orderInfo.refundType == 0" :span="12" class="title fontColor1">订单状态：{{ orderInfo.state | payTypeFilter('state') }}</el-col>
      <el-col v-else :span="12" class="title fontColor1">订单状态：{{ orderInfo.refundState | payTypeFilter('refundState') }}</el-col>
    </el-row>
    <el-row class="mb10">
      <el-col :span="12" class="title">商品总数：{{ orderInfo.totalNum }}</el-col>
      <el-col :span="12" class="title">商品总价：{{ orderInfo.totalPrice | NumFormat }}</el-col>
    </el-row>
    <el-row class="mb10">
      <el-col :span="12" class="title">交付邮费：{{ orderInfo.totalPostage | NumFormat }}</el-col>
      <el-col :span="12" class="title">实际支付：{{ orderInfo.payPrice | NumFormat }}</el-col>
    </el-row>
    <el-row class="mb10">
      <el-col v-if="parseFloat(orderInfo.refundPrice)" :span="12" class="title fontColor3 mb10">退款金额：{{ parseFloat(orderInfo.refundPrice) }}</el-col>
      <el-col :span="12" class="title mb10">创建时间：{{ orderInfo.createDateUTC | uctTimeFileter }}</el-col>
      <el-col :span="12" class="title mb10">支付时间：{{ orderInfo.payDateUTC | uctTimeFileter }}</el-col>
      <el-col :span="12" class="title mb10">支付方式：{{ orderInfo.payType | payTypeFilter('payType') }}</el-col>
    </el-row>
    <div v-if="orderInfo.deliveryType == 0 && [0, 2].includes(orderInfo.refundType) && [0, 2, 5].includes(orderInfo.refundState)">
      <el-divider style="margin: 20px 0 !important" />
      <div class="order-title">物流信息</div>
      <el-row class="mb10">
        <el-col :span="12" class="title">快递公司：{{ orderInfo.deliveryName }}</el-col>
        <el-col :span="12" class="title">快递单号：{{ orderInfo.deliveryNum }}
          <el-button type="primary" size="mini" @click="delivery">物流查询</el-button>
        </el-col>
      </el-row>
    </div>
    <div v-if="orderInfo.deliveryType === 1 && [0, 2].includes(orderInfo.refundType) && [0, 2, 5].includes(orderInfo.refundState)">
      <el-divider style="margin: 20px 0 !important" />
      <div class="order-title">配送信息</div>
      <el-row class="mb10">
        <el-col :span="12">送货人姓名：{{ orderInfo.deliveryName }}</el-col>
        <!-- 后端暂未返回送货人电话 -->
        <el-col v-if="false" :span="12">送货人电话：{{ orderInfo.deliveryNum }}</el-col>
      </el-row>
    </div>
    <div v-if="(orderInfo.refundState != 0 || orderInfo.refundState != 2) && orderInfo.refundType != 0">
      <el-divider style="margin: 20px 0 !important;" />
      <div class="order-title">退款信息</div>
      <el-row class="mb10">
        <el-col v-if="orderInfo.refundWapReason" :span="12" class="title">退款原因：{{ orderInfo.refundWapReason }}</el-col>
        <el-col v-if="orderInfo.refundState" :span="12" class="title">退款状态：{{ orderInfo.refundState | payTypeFilter('refundState') }}</el-col>
      </el-row>
      <el-row class="mb10">
        <el-col v-if="$util.splitArray(orderInfo.refundWapImg, ',').length" :span="12" style="display: flex;font-size: 12px;">
          退款凭证：
          <div class="tabBoxPic">
            <div v-for="(item, index) in $util.splitArray(orderInfo.refundWapImg, ',')" :key="index" v-viewer class="tabBox_img">
              <img v-lazy="$uploadURL(item)">
            </div>
          </div>
        </el-col>
        <el-col v-if="orderInfo.refundReason" :span="12" class="title">不退款原因：{{ orderInfo.refundReason }}</el-col>
      </el-row>
    </div>
    <div v-if="orderInfo.remark">
      <el-divider style="margin: 20px 0 !important" />
      <div class="order-title">备注信息</div>
      <el-row class="mb10">
        <el-col :span="12" class="fontColor2">{{ orderInfo.remark }}</el-col>
        <el-col v-if="orderInfo.adminRemark" :span="12" class="title mb10">管理员备注：{{ orderInfo.adminRemark }}</el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {
  orderDetailApi as getRefundInfoApi
} from '@/api/order'

export default {
  name: 'Index',
  filters: {
    payTypeFilter(val, key) {
      if (key === 'payType') {
        const data = {
          0: '微信支付',
          1: '支付宝支付'
        }
        return data[val]
      } else if (key === 'state') {
        const data = {
          0: '订单已生成',
          1: '待支付',
          2: '支付失败',
          3: '订单取消',
          4: '待发货',
          5: '待确认收货',
          6: '待评价',
          7: '已退款',
          8: '交易成功'
        }
        return data[val]
      } else if (key === 'refundState') {
        const data = {
          1: '退款申请中',
          2: '拒绝退款',
          3: '商品待退货',
          4: '商品待收货',
          5: '已退款'
        }
        return data[val]
      }
    }
  },
  props: {
    orderId: {
      type: [String, Number],
      default: 0
    }
  },
  data() {
    return {
      orderInfo: {},
      toLoad: false
    }
  },
  created() {
    this.toInfo()
  },
  methods: {
    /**
     * 获取指定订单
     */
    toInfo() {
      this.$set(this, "toLoad", true);
      getRefundInfoApi(this.orderId).then(res => {
        this.$set(this, "toLoad", false);
        this.orderInfo = res
      }).catch(err => {
        this.orderInfo = {};
        this.$set(this, "toLoad", false);
      });
    },
    delivery() {
      window.location.href = `https://m.kuaidi100.com/app/query/?nu=${this.orderId}&coname=meizu`
    }
  }
}
</script>

<style lang="scss" scoped>
  .order-title {
    margin-bottom: 16px;
    color: #17233d;
    font-weight: 500;
    font-size: 14px;
  }
  .title {
    font-size: 12px;
    color: #515a6e;
  }
  .fontColor1 {
    color: red !important;
  }
  .fontColor2 {
    color: #733AF9 !important;
  }
  .fontColor3 {
    color: #f1a417 !important;
  }
  .tabBoxPic {
    display: flex;
  }
  .tabBox_img {
    cursor: pointer;
  }
</style>
